<template>
    <div id="activity" @scroll="activityScroll">
        <div class="common-title">Activities</div>
        <div class="activity-list" v-if="activityList.length>0" v-loading="loading_activitys">
            <div class="activity-item" v-for="(item,index) in activityList" v-if="item.type">
                <div class="activity-body">
                    <div class="activity-title">
                        <div class="activity-img">
                            <img class="xiaomi" :src="item.actor.avatar_url" />
                        </div>
                        <div class="activity-user">
                            <div class="activity-name">{{item.actor.name}}</div>
                            <div class="activity-account">@{{item.actor.login}}</div>
                        </div>
                        <div class="activity-update"><i class="iconfont icon-clock"></i>
                            {{helper.friendlyTime(item.created_at)}}
                        </div>
                    </div>
                    <div class="activity-desc">
                        <template v-if="item.type=='ForkEvent'">
                            Fork the <router-link :to="item.repo.full_name">{{item.repo.human_name}}</router-link>
                            project to
                            <router-link :to="item.payload.full_name">{{item.payload.human_name}}</router-link>
                        </template>
                        <template v-if="item.type=='PushEvent'">
                            Push {{item.payload.commits.length}} commits to <router-link :to="item.repo.full_name">
                                {{item.repo.human_name}}</router-link> on branch
                            <b>{{item.payload.ref.replace("refs/heads/","")}}</b>
                            <div class="activity-comment">
                                <div v-for="(commit) in item.payload.commits"><i
                                        class="iconfont icon-shangchuan1"></i>{{commit.message}}</div>
                            </div>
                        </template>
                        <template v-if="item.type=='StarEvent'">
                            <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-11"></i>Star the project
                            <router-link :to="item.repo.full_name">
                                {{item.repo.human_name}}</router-link>
                        </template>

                        <template v-if="item.type=='CreateEvent'">
                            <template v-if="item.payload.ref_type=='repository'">Create a new repository called
                                <router-link :to="item.repo.full_name">
                                    {{item.repo.human_name}}</router-link> ({{item.payload.description}})
                            </template>

                            <template v-if="item.payload.ref_type=='branch'">Create a new branch
                                <b>{{item.payload.ref}}</b> for the repository <router-link :to="item.repo.full_name">
                                    {{item.repo.human_name}}</router-link>
                            </template>
                        </template>
                        <template v-if="item.type=='ProjectCommentEvent'">
                            Post a comment in project <router-link :to="item.repo.full_name">
                                {{item.repo.human_name}}</router-link>
                            <div class="activity-comment comment-area">
                                <i class="iconfont icon-message2"></i>
                                <div class="comment-content"
                                    v-html="item.markdown||markdownToHtml(index,item.payload.comment.body)"></div>
                            </div>
                        </template>
                        <template v-if="item.type=='IssueCommentEvent'">
                            Post a comment to issue <b>{{item.payload.issue.title}}</b> in project <router-link
                                :to="item.repo.full_name">
                                {{item.repo.human_name}}</router-link>
                            <div class="activity-comment comment-area">
                                <i class="iconfont icon-message2"></i>
                                <div class="comment-content"
                                    v-html="item.markdown||markdownToHtml(index,item.payload.comment.body)"></div>
                            </div>
                        </template>
                        <template v-if="item.type=='PullRequestCommentEvent'">
                            Post a comment to the pull request <b>{{item.payload.pull_request.title}}</b> in project
                            <router-link :to="item.repo.full_name">
                                {{item.repo.human_name}}</router-link>
                            <div class="activity-comment comment-area">
                                <div class="comment-content"
                                    v-html="item.markdown||markdownToHtml(index,item.payload.comment.body)"></div>
                            </div>
                        </template>
                        <template v-if="item.type=='PullRequestEvent'">
                            <template v-if="item.payload.action=='merged'"><b>Mergeg</b></template>
                            <template v-else-if="item.payload.action=='opened'"><b>Opened</b></template>
                            <template v-else-if="item.payload.action=='closed'"><b>Closed</b></template>
                            <template v-else><b style="color:orangered">{{item.payload.action}}</b></template>

                            the pull request <b>{{item.payload.title}}</b> in project <router-link
                                :to="item.repo.full_name">
                                {{item.repo.human_name}}</router-link>

                        </template>
                        <template v-if="item.type=='IssueEvent'">
                            <template v-if="item.payload.action=='closed'"><b>Closed</b></template>
                            <template v-else-if="item.payload.action=='rejected'"><b>Refused</b></template>
                            <template v-else-if="item.payload.action=='progressing'"><b>Starting</b></template>
                            <template v-else><b style="color:orangered">{{item.payload.action}}</b></template>
                            the issue <b>{{item.payload.title}}</b> in project <router-link :to="item.repo.full_name">
                                {{item.repo.human_name}}</router-link>
                            <div class="activity-comment comment-area">
                                <div class="comment-content"
                                    v-html="item.markdown||markdownToHtml(index,item.payload.body)"></div>
                            </div>
                        </template>
                        <template v-if="item.type=='MemberEvent'">
                            <template v-if="item.payload.action=='deleted'">
                                <template v-if="item.payload.login == item.actor.login">
                                    <b>Quit</b> the project <router-link :to="item.repo.full_name">
                                        {{item.repo.human_name}}</router-link>
                                </template>
                                <template v-if="item.payload.login != item.actor.login">
                                    <b>Removed</b> the member <b>{{item.payload.name}}</b>(@{{item.payload.login}}) of
                                    the project <router-link :to="item.repo.full_name">
                                        {{item.repo.human_name}}</router-link>

                                </template>
                            </template>
                            <template v-else-if="item.payload.action=='added'"><b>Joined</b> the project <router-link
                                    :to="item.repo.full_name">
                                    {{item.repo.human_name}}</router-link>
                            </template>
                            <template v-else><b style="color:orangered">{{item.payload.action}}</b></template>

                        </template>
                        <template v-if="item.type=='CommitCommentEvent'">
                            Post a comment to the <b>Commits</b> of the project <router-link :to="item.repo.full_name">
                                {{item.repo.human_name}}</router-link>
                            <div class="activity-comment comment-area">
                                <i class="iconfont icon-message2"></i>
                                <div class="comment-content"
                                    v-html="item.markdown||markdownToHtml(index,item.payload.comment.body)"></div>
                            </div>
                        </template>

                    </div>
                </div>
            </div>
        </div>
        <el-empty class="common-tips" :description="loading_tips" v-if="activityList.length==0"></el-empty>
    </div>
</template>
<script>
    import request from "@/lib/request";
    import helper from "@/lib/helper";
    export
        default {
            data() {
                return {
                    activityList: [],
                    loading_activitys: false,
                    loading_tips: "Loading ...",
                    prev_id: 0,
                    userInfo: false,
                }
            },
            created() {
                this.userInfo = helper.getUserInfo();
                this.getActivityList();
            },
            methods: {
                activityScroll(e) {
                    if (e.target.scrollTop + e.target.clientHeight + 30 > e.target.scrollHeight) {
                        if (!this.loading_activitys) {
                            this.prev_id = this.activityList[this.activityList.length - 1].id;
                            this.getActivityList();
                        }
                    }
                },
                reloadData() {
                    this.prev_id = 0;
                    this.getActivityList();
                },
                getActivityList() {
                    let that = this;
                    if (that.loading_activitys) {
                        return;
                    }
                    that.loading_activitys = true;
                    that.loading_tips = "Loading ...";
                    request({
                        url: "/users/" + that.userInfo.login + "/received_events?prev_id=" + that.prev_id,
                        success(res) {
                            if (that.page == 1) {
                                that.activityList = res;
                            } else {
                                that.activityList = that.activityList.concat(res);
                            }
                        },
                        final() {
                            that.loading_activitys = false;
                            if (that.activityList.length == 0) {
                                that.loading_tips = "No Activities";
                            }
                        }
                    });
                },
                markdownToHtml(index, markdown) {
                    let that = this;
                    var converter = new showdown.Converter();
                    //转换为HTML
                    var html = converter.makeHtml(markdown);
                    if (!html) {
                        html = ".";
                    }
                    that.activityList[index].markdown = html.replaceAll("https://images.gitee.com/", "https://gitee_image.hamm.cn/");

                    that.$nextTick(function () {
                        let doms = document.querySelectorAll(".comment-area a");
                        try {
                            for (let i in doms) {
                                doms[i].addEventListener("click", function (e) {
                                    let url = this.attributes.href.value;
                                    if (url) {
                                        window.open(url);
                                    }
                                    e.preventDefault();
                                });
                            }
                        } catch (e) {
                        }
                    });
                    that.$forceUpdate();
                },

            }
        }
</script>
<style>
    #activity {
        overflow: hidden;
        overflow-y: auto;
        flex-grow: 1;
    }

    .activity-item {
        text-decoration: none;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px dashed #ddd;
    }

    .activity-body {
        background: white;
        border-radius: 10px;
        position: relative;
        margin: 10px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        font-weight: 300;
    }

    .activity-img img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .activity-title {
        display: flex;
        flex-direction: row;
    }

    .activity-user {
        flex-grow: 1;
    }

    .activity-name {
        font-size: 16px;
        color: #333;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        overflow: hidden;
        flex-grow: 1;
        font-weight: normal;
        margin-left: 10px;
    }

    .activity-account {
        font-size: 14px;
        color: #999;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        overflow: hidden;
        flex-grow: 1;
        margin-left: 10px;
    }

    .activity-desc {
        font-size: 14px;
        margin-top: 10px;
        word-break: break-all;
        color: #999;
    }

    .activity-desc a,
    .activity-desc b {
        color: #333;
        font-weight: normal;
    }
    .activity-desc img{
        max-width: 50%;
        max-height: 400px;
        display: block;
    }

    .activity-comment {
        vertical-align: middle;
        margin-top: 10px;
        color: #666;
        font-weight: 300;
        background: #f5f5f5;
        padding: 10px;
        border-radius: 10px;
    }

    .activity-comment .iconfont {
        vertical-align: middle;
        margin-right: 10px;
    }

    .activity-list {
        overflow: hidden;
        overflow-y: auto;
        flex-grow: 1;
    }

    .activity-list::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }


    .activity-tips {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 14px;
    }

    .activity-tips .iconfont {
        display: block;
        font-size: 48px;
        margin-bottom: 10px;
        font-weight: 200;
    }


    .activity-update {
        font-size: 14px;
        color: #ccc;
    }

    .activity-update .iconfont {
        font-weight: bold;
    }
</style>